<template>
  <div class="un-dialog-pd-top">
    <el-dialog
      :model-value="props.dialogVisible"
      title="升级日志"
      width="1000px"
      :close-on-click-modal="false"
      :before-close="handleClose">
      <div class="btn-group mb16">
        <el-button type="primary" @click="refresh">刷新</el-button>
      </div>

      <el-table :data="tableData" class="nr-table">
        <el-table-column label="设备名称" prop="deviceName"></el-table-column>
        <el-table-column label="设备SN" prop="deviceSn"></el-table-column>
        <el-table-column label="固件版本" prop="version"></el-table-column>
        <el-table-column label="状态" prop="logType">
          <template #default="scope">
              <el-tag :type="scope.row.logType === '0' ? 'success' : 'danger'">{{filterLogType(scope.row.logType)}}</el-tag>
            </template>
        </el-table-column>
        <el-table-column label="升级时间" prop="logTime">
          <template #default="scope">
              <span>{{scope.row.logTime ? moment(scope.row.logTime).format('YYYY-MM-DD HH:mm:ss') : ''}}</span>
            </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="nr-page"
        v-model:current-page="searchParams.currentPage"
        v-model:page-size="searchParams.pageSize"
        :page-sizes="[10, 20, 30, 40]"
        background
        layout="total, prev, pager, next, sizes, jumper"
        :total="searchParams.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange">
      </el-pagination>
    </el-dialog>
  </div>
</template>

<script setup lang="ts" name="FirmwareUpdateLogDialog">
import { ref, reactive, watch, ComponentInternalInstance, getCurrentInstance, onMounted, nextTick } from 'vue'
import { ElMessage, ElMessageBox, ElTable } from 'element-plus'
import { firmwareUpdateLogListPage } from '@/api/firmware-update'
import moment from 'moment'

const { proxy } = getCurrentInstance() as ComponentInternalInstance

const emit = defineEmits(['update:dialogVisible'])
const props = defineProps({
  dialogVisible: {
    type: Boolean,
    default: false
  },
  formData: {
    type: Object,
    default: {}
  }
})

const searchParams = reactive({
  deviceName: '',
  deviceSn: '',
  currentPage: 1,
  pageSize: 10,
  total: 0
})
const tableData = ref<any>([])

watch(() => props.dialogVisible, async (newVal) => {
  if (newVal) {
    searchParams.deviceSn = props.formData.deviceSn
    searchParams.deviceName = props.formData.deviceName
    getFirmwareUpdateLogData()
  }
})

// 过滤升级状态
const filterLogType = (type: any) => {
  let str = ''
  switch(type) {
    case '0':
      str = '正常'
      break
    case '-9999':
      str = 'JSON乱码或指令无法识别'
      break
    case '-2002':
      str = '请求发送失败'
      break
    case '-2003':
      str = '服务器响应超时'
      break
    case '-2010':
      str = '-切片大小与描述不符'
      break
  }
  return str
}

// 刷新
const refresh = () => {
  getFirmwareUpdateLogData()
}

// 查询
const search = () => {
  searchParams.currentPage = 1
  getFirmwareUpdateLogData()
}

// 分页跳转
const handleCurrentChange = (val: number) => {
  getFirmwareUpdateLogData()
}
const handleSizeChange = (val: number) => {
  getFirmwareUpdateLogData()
}

// 关闭弹窗
const handleClose = () => {
  tableData.value = []
  searchParams.deviceSn = ''
  searchParams.currentPage = 1
  searchParams.pageSize = 10
  searchParams.total = 0
  searchParams.deviceName = ''
  proxy?.$emit('update:dialogVisible', false)
}

// 获取固件升级日志表格数据
const getFirmwareUpdateLogData = async () => {
  let params = {
    deviceSn: searchParams.deviceSn,
    currentPage: searchParams.currentPage,
    pageSize: searchParams.pageSize
  }
  await firmwareUpdateLogListPage(params).then((res: any) => {
    if (res.code === 0) {
      let arr = <any>[]
      res.list.map((item: any) => {
        let obj = Object.assign({ deviceName: searchParams.deviceName }, item)
        arr.push(obj)
      })
      tableData.value = [...arr]
      searchParams.total = res.page.totalSize
    } else {
      ElMessage.error(`${res.msg}`)
    }
  }).catch(err => {
    console.log(err)
  })
}
</script>

<style lang="stylus" scoped>
@import '../../style/base.styl'

.un-dialog-pd-top
  :deep(.el-dialog__body)
    padding-top 6px !important
</style>
